<template>
	<div class="thePage">
		<!-- 1-顶部标题和产品类按钮 -->
		<top @onChanged="onChangedCategory" :year="query.year" :switchTime="switchTime" />
		
		<!-- 2-地图 -->
		<div class="theMap" ref="mapDiv" @click="showVillageDetail = false">
			<!-- 村庄点 -->
			<div
				class="locationVillage"
				v-for="(item, i) in listVillage"
				:key="'village' + i"
				:style="{ left: item.locationX + '%', bottom: item.locationY + '%' }"
				@click.stop="onVillageDetail(item)"
			>
				<!-- <img class="iconVillage" :src="iconVillage" /> -->
				<span class="nameVillage">{{ `${item.name}(${item.altitude}米)` }}</span>
			</div>

			<!-- 种植站 -->
			<img
				class="iconCategoey"
				v-for="(item, i) in listPlant"
				:key="'plant' + i"
				:src="iconCategory[item.categoryId]"
				:style="{ left: item.locationX + '%', bottom: item.locationY + '%' }"
				@click.stop="onPlantDetail(item)"
			/>

			<!-- 村庄介绍弹框 -->
			<popup :curVillage="curVillage" :showVillageDetail="showVillageDetail" />
		</div>
	</div>
</template>

<script>
import top from './components/top.vue';
import popup from './components/popup.vue';
import { listMapData } from '@/api/home.js'; //同 home 页面
import baseCategoryMixins from '../mixins/baseCategoryMixins.js';

export default {
	name: 'Center1CategoryMap',
	components: {
		top,
		popup
	},
	mixins: [baseCategoryMixins],
	data() {
		return {
			switchTime: 60 * 1000, //产品分类按钮切换时间（毫秒）<暂时写死？？？？？？？>
			query: {
				year: new Date().getFullYear(),
				categoryId: 1 //1-香榧 2-笋竹 3-山黄精
			},
			//iconVillage: require('@/assets/img/map/village.png'),
			iconCategory: {
				1: require('@/assets/img/map/category1.png'),
				2: require('@/assets/img/map/category2.png'),
				3: require('@/assets/img/map/category3.png')
			},
			listVillage: [], //数据结构参见src/mock/category.js
			listPlant: [], //数据结构参见src/mock/category.js
			listSale: [], //数据结构参见src/mock/category.js
			showVillageDetail: false,
			curVillageId: null
		};
	},
	computed: {
		curVillage() {
			if (!this.curVillageId) return null;
			let theVillage = this.listVillage.find(item => item.id == this.curVillageId); //村id、名称、位置x,y
			theVillage.acreage = eval(this.listPlant.map(item => item.acreage).join('+')).toFixed(2);
			theVillage.count = eval(this.listSale.map(item => item.count).join('+')).toFixed(2);
			theVillage.amount = eval(this.listSale.map(item => item.amount).join('+')).toFixed(2);
			return theVillage;
		}
	},

	methods: {
		loadData() {
			listMapData(this.query).then(result => {
				console.log('listMapData Result = ', result);
				this.listVillage = result.listVillage;
				this.listPlant = result.listPlant;
				this.listSale = result.listSale;
			});
		},

		onVillageDetail(item) {
			this.curVillageId = item.id;
			this.showVillageDetail = true;
		},

		// 自定义事件响应方法
		onChangedCategory(categoryId) {
			this.query.categoryId = categoryId;
			this.$store.dispatch('settings/setCurCategoryId', categoryId);
		}
	}
};
</script>
<style lang="scss" scoped>
.thePage {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	background-color: rgba(4, 123, 83, 0.1);

	.theMap {
		// padding: 60px ;
		flex: 1;
		width: 100%;
		margin: 100px 0;
		background-image: url('~@/assets/img/map/center1-map.png');
		background-size: 100% 100%;
		background-position: center center;
		position: relative;

		.locationVillage {
			cursor: pointer;
			position: absolute;
			display: flex;
			flex-direction: row;
			align-items: center;
			.iconVillage {
				width: 32px;
				height: 32px;
			}
			.nameVillage {
				height: 32px;
				font-size: 16px;
				line-height: 32px;
				color: #6baf97;
			}
		}
		.iconCategoey {
			width: 35px;
			height: 35px;
			cursor: pointer;
			position: absolute;
		}
	}
}
</style>
